<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-header">
        <i class="el-icon-date"></i>
        <span>作训计划查询</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="学年" prop="year">
          <el-select v-model="queryParams.year" placeholder="选择学年" clearable>
            <el-option
              v-for="year in yearOptions"
              :key="year"
              :label="year + '学年'"
              :value="year"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期" prop="term">
          <el-select v-model="queryParams.term" placeholder="选择学期" clearable>
            <el-option
              v-for="item in termOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区 -->
    <div class="action-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleAddTerm">
        新增学期计划
      </el-button>
    </div>

    <!-- 学期计划展示区 -->
    <el-row :gutter="20">
      <el-col :span="24" v-for="item in termList" :key="item.termId">
        <el-card class="term-card" shadow="hover">
          <!-- 学期状态标签 -->
          <div class="status-tag" :class="getStatusClass(item.status)">
            {{ getStatusLabel(item.status) }}
          </div>

          <!-- 学期基本信息 -->
          <div class="term-header">
            <div class="term-title">
              <span class="year">{{ item.year }}学年</span>
              <span class="term-type" :class="getTermClass(item.term)">
                {{ getTermLabel(item.term) }}
              </span>
              <h2 class="name">{{ item.name }}</h2>
            </div>
            <div class="term-info">
              <div class="info-item">
                <i class="el-icon-time"></i>
                <span class="label">起止时间：</span>
                <span class="value">{{ item.startTime }} 至 {{ item.endTime }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-user"></i>
                <span class="label">负责人：</span>
                <span class="value">{{ item.leader }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-phone"></i>
                <span class="label">联系方式：</span>
                <span class="value">{{ item.phone }}</span>
              </div>
            </div>
          </div>

          <!-- 学期描述 -->
          <div class="term-description" v-if="item.description">
            <el-divider content-position="left">学期概述</el-divider>
            <div class="description-content">{{ item.description }}</div>
          </div>

          <!-- 操作按钮 -->
          <div class="term-actions">
            <el-button type="primary" size="mini" @click="handleViewDetails(item)">
              查看详情
            </el-button>
            <el-button type="warning" size="mini" @click="handleUpdate(item)">
              编辑
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(item)">
              删除
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增/修改学期对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="学年" prop="year">
          <el-select v-model="form.year" placeholder="请选择学年">
            <el-option
              v-for="year in yearOptions"
              :key="year"
              :label="year + '学年'"
              :value="year"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期" prop="term">
          <el-select v-model="form.term" placeholder="请选择学期">
            <el-option
              v-for="item in termOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入计划名称"/>
        </el-form-item>
        <el-form-item label="起止时间" prop="timeRange">
          <el-date-picker
            v-model="form.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="form.leader" placeholder="请输入负责人姓名"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="学期概述" prop="description">
          <el-input
            type="textarea"
            v-model="form.description"
            placeholder="请输入学期概述"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      size="60%"
      class="term-drawer"
    >
      <div class="drawer-container">
        <div class="drawer-header">
          <h3>{{ currentTerm.name }} - 详细计划</h3>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddPlan">
            添加计划
          </el-button>
        </div>

        <!-- 时间线展示具体计划 -->
        <el-timeline>
          <el-timeline-item
            v-for="(plan, index) in planList"
            :key="index"
            :timestamp="plan.startTime + ' 至 ' + plan.endTime"
            :type="getTimelineItemType(plan.status)"
          >
            <el-card class="plan-card">
              <div class="plan-header">
                <h4>{{ plan.name }}</h4>
                <el-tag :type="getPlanStatusType(plan.status)">
                  {{ getPlanStatusLabel(plan.status) }}
                </el-tag>
              </div>
              
              <div class="plan-content">
                <p class="plan-description">{{ plan.content }}</p>
                <div class="plan-info">
                  <span><i class="el-icon-user"></i> 负责人：{{ plan.leader }}</span>
                  <span><i class="el-icon-phone"></i> 联系方式：{{ plan.phone }}</span>
                </div>
              </div>

              <div class="plan-actions">
                <el-button type="text" @click="handleEditPlan(plan)">编辑</el-button>
                <el-button type="text" @click="handleDeletePlan(plan)">删除</el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>

    <!-- 添加/编辑具体计划的对话框 -->
    <el-dialog
      :title="planTitle"
      :visible.sync="planOpen"
      width="500px"
      append-to-body
    >
      <el-form ref="planForm" :model="planForm" :rules="planRules" label-width="100px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="planForm.name" placeholder="请输入计划名称"/>
        </el-form-item>
        <el-form-item label="起止时间" prop="timeRange">
          <el-date-picker
            v-model="planForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="planForm.leader" placeholder="请输入负责人姓名"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="planForm.phone" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="计划内容" prop="content">
          <el-input
            type="textarea"
            v-model="planForm.content"
            placeholder="请输入具体计划内容"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="planOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitPlanForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Zxjh",
  data() {
    return {
      // 查询参数
      queryParams: {
        year: undefined,
        term: undefined
      },
      
      // 年份选项（前后5年）
      yearOptions: (() => {
        const currentYear = new Date().getFullYear()
        const years = []
        for(let i = currentYear - 5; i <= currentYear + 5; i++) {
          years.push(i)
        }
        return years
      })(),
      
      // 学期选项
      termOptions: [
        { value: 1, label: '上半学期' },
        { value: 2, label: '夏季学期' },
        { value: 3, label: '下半学期' },
        { value: 4, label: '冬季学期' }
      ],
      
      // 显示学期对话框
      open: false,
      // 显示计划对话框
      planOpen: false,
      // 显示详情抽屉
      drawer: false,
      
      // 标题
      title: '',
      planTitle: '',
      
      // 当前选中的学期
      currentTerm: {},
      
      // 表单对象
      form: {},
      
      // 计划表单对象
      planForm: {},

      // 表单校验规则
      rules: {},
      planRules: {},

      // 学期列表数据 - 模拟数据
      termList: [
        {
          termId: 1,
          year: 2024,
          term: 1,
          name: "2024年上半学期作训计划",
          startTime: "2024-03-01",
          endTime: "2024-07-15",
          leader: "张三",
          phone: "13800138000",
          description: "本学期重点关注新生训练和队列训练，为建队20周年做准备。",
          status: 1
        },
        {
          termId: 2,
          year: 2024,
          term: 2,
          name: "2024年夏季学期作训计划",
          startTime: "2024-07-16",
          endTime: "2024-08-31",
          leader: "李四",
          phone: "13800138001",
          description: "暑期集中训练，重点提升体能和专业技能。",
          status: 1
        },
        {
          termId: 3,
          year: 2024,
          term: 3,
          name: "2024年下半学期作训计划",
          startTime: "2024-09-01",
          endTime: "2024-12-31",
          leader: "王五",
          phone: "13800138002",
          description: "本学期重点开展新生培训、国庆升旗准备、体能强化等训练。",
          status: 0
        },
        {
          termId: 4,
          year: 2023,
          term: 4,
          name: "2023年冬季学期作训计划",
          startTime: "2024-01-01",
          endTime: "2024-02-28",
          leader: "赵六",
          phone: "13800138003",
          description: "寒假期间以体能训练为主，为春季训练打好基础。",
          status: 0
        },
        {
          termId: 5,
          year: 2023,
          term: 3,
          name: "2023年下半学期作训计划",
          startTime: "2023-09-01",
          endTime: "2023-12-31",
          leader: "孙七",
          phone: "13800138004",
          description: "以实战为导向，全面提升护卫能力。",
          status: 0
        }
      ],
      
      // 具体计划列表 - 模拟数据
      planList: [
        {
          planId: 1,
          name: "新生训练周",
          startTime: "2024-03-01",
          endTime: "2024-03-07",
          leader: "张三",
          phone: "13800138000",
          content: "针对新入队队员进行基础训练，包括立正稍息、跨立、停止间转法等基本动作。",
          status: 1
        },
        {
          planId: 2,
          name: "升旗仪式培训",
          startTime: "2024-03-08",
          endTime: "2024-03-15",
          leader: "李四",
          phone: "13800138001",
          content: "重点训练升旗仪式的各个环节，确保动作规范统一。",
          status: 1
        },
        {
          planId: 3,
          name: "体能强化训练",
          startTime: "2024-03-16",
          endTime: "2024-03-31",
          leader: "王五",
          phone: "13800138002",
          content: "通过晨跑、力量训练等形式提升队员体能水平。",
          status: 0
        }
      ]
    }
  },
  created() {
    this.termList = [
      {
        termId: 1,
        year: 2024,
        term: 1,
        name: "2024年上半学期作训计划",
        startTime: "2024-03-01",
        endTime: "2024-07-15",
        leader: "张三",
        phone: "13800138000",
        description: "本学期重点关注新生训练和队列训练，为建队20周年做准备。",
        status: 1
      },
      {
        termId: 2,
        year: 2024,
        term: 2,
        name: "2024年夏季学期作训计划",
        startTime: "2024-07-16",
        endTime: "2024-08-31",
        leader: "李四",
        phone: "13800138001",
        description: "暑期集中训练，重点提升体能和专业技能。",
        status: 1
      },
      {
        termId: 3,
        year: 2024,
        term: 3,
        name: "2024年下半学期作训计划",
        startTime: "2024-09-01",
        endTime: "2024-12-31",
        leader: "王五",
        phone: "13800138002",
        description: "本学期重点开展新生培训、国庆升旗准备、体能强化等训练。",
        status: 0
      },
      {
        termId: 4,
        year: 2023,
        term: 4,
        name: "2023年冬季学期作训计划",
        startTime: "2024-01-01",
        endTime: "2024-02-28",
        leader: "赵六",
        phone: "13800138003",
        description: "寒假期间以体能训练为主，为春季训练打好基础。",
        status: 0
      },
      {
        termId: 5,
        year: 2023,
        term: 3,
        name: "2023年下半学期作训计划",
        startTime: "2023-09-01",
        endTime: "2023-12-31",
        leader: "孙七",
        phone: "13800138004",
        description: "以实战为导向，全面提升护卫能力。",
        status: 0
      }
    ];

    // 当查看详情时显示的具体计划列表
    this.planList = [
      {
        planId: 1,
        name: "新生训练周",
        startTime: "2024-03-01",
        endTime: "2024-03-07",
        leader: "张三",
        phone: "13800138000",
        content: "针对新入队队员进行基础训练，包括立正稍息、跨立、停止间转法等基本动作。",
        status: 1
      },
      {
        planId: 2,
        name: "升旗仪式培训",
        startTime: "2024-03-08",
        endTime: "2024-03-15",
        leader: "李四",
        phone: "13800138001",
        content: "重点训练升旗仪式的各个环节，确保动作规范统一。",
        status: 1
      },
      {
        planId: 3,
        name: "体能强化训练",
        startTime: "2024-03-16",
        endTime: "2024-03-31",
        leader: "王五",
        phone: "13800138002",
        content: "通过晨跑、力量训练等形式提升队员体能水平。",
        status: 0
      }
    ];
  },
  methods: {
    /** 查询学期列表 */
    getList() {
      // 模拟数据
      this.termList = [
        {
          termId: 1,
          year: 2024,
          term: 1,
          name: "2024年上半学期作训计划",
          startTime: "2024-03-01",
          endTime: "2024-07-15",
          leader: "张三",
          phone: "13800138000",
          description: "本学期重点关注新生训练和队列训练，为建队20周年做准备。",
          status: 1
        }
        //在这里新增几条数据，并且新增对应的详情
      ];
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      // 这里可以添加实际的搜索逻辑
      console.log('查询参数:', this.queryParams);
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        year: undefined,
        term: undefined
      };
      this.handleQuery();
    },
    
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    
    /** 表单重置 */
    reset() {
      this.form = {
        year: undefined,
        term: undefined,
        name: '',
        timeRange: [],
        leader: '',
        phone: '',
        description: ''
      };
      this.resetForm("form");
    },
    
    /** 新增按钮操作 */
    handleAddTerm() {
      this.title = "新增学期计划";
      this.open = true;
    },
    
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.title = "修改学期计划";
      this.form = {
        ...row,
        timeRange: [row.startTime, row.endTime]
      };
      this.open = true;
    },
    
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.msgSuccess("操作成功");
          this.open = false;
          this.getList();
        }
      });
    },
    
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除该学期计划?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 这里添加实际的删除逻辑
        this.$message.success("删除成功");
      });
    },
    
    /** 查看详情按钮操作 */
    handleViewDetails(item) {
      this.$router.push({
        path: '/manager/zxjh/detail',
        query: {
          termId: item.termId,
          name: item.name
        }
      });
    },
    
    /** 新增计划按钮操作 */
    handleAddPlan() {
      this.planTitle = "新增具体计划";
      this.planForm = {
        name: '',
        timeRange: [],
        leader: '',
        phone: '',
        content: ''
      };
      this.planOpen = true;
    },
    
    /** 编辑计划按钮操作 */
    handleEditPlan(plan) {
      this.planTitle = "修改具体计划";
      this.planForm = {
        ...plan,
        timeRange: [plan.startTime, plan.endTime]
      };
      this.planOpen = true;
    },
    
    /** 删除计划按钮操作 */
    handleDeletePlan(plan) {
      this.$confirm('是否确认删除该具体计划?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 这里添加实际的删除逻辑
        this.$message.success("删除成功");
      });
    },
    
    /** 提交具体计划表单 */
    submitPlanForm() {
      this.$refs["planForm"].validate(valid => {
        if (valid) {
          this.$modal.msgSuccess("操作成功");
          this.planOpen = false;
          this.handleViewDetails(this.currentTerm);
        }
      });
    },
    
    // 获取学期类型样式
    getTermClass(term) {
      const map = {
        1: 'term-spring',
        2: 'term-summer',
        3: 'term-autumn',
        4: 'term-winter'
      };
      return map[term];
    },
    
    // 获取学期类型标签
    getTermLabel(term) {
      const map = {
        1: '上半学期',
        2: '夏季学期',
        3: '下半学期',
        4: '冬季学期'
      };
      return map[term];
    },
    
    // 获取状态样式
    getStatusClass(status) {
      return status === 1 ? 'status-active' : 'status-ended';
    },
    
    // 获取状态标签
    getStatusLabel(status) {
      return status === 1 ? '进行中' : '已结束';
    },
    
    // 获取时间线节点类型
    getTimelineItemType(status) {
      return status === 1 ? 'primary' : 'info';
    },
    
    // 获取计划状态类型
    getPlanStatusType(status) {
      return status === 1 ? 'success' : 'info';
    },
    
    // 获取计划状态标签
    getPlanStatusLabel(status) {
      return status === 1 ? '进行中' : '已完成';
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
  background: #fff;
  
  .search-header {
    margin-bottom: 18px;
    font-size: 16px;
    
    i {
      margin-right: 8px;
      color: #409EFF;
    }
  }
}

.action-bar {
  margin-bottom: 20px;
}

.term-card {
  position: relative;
  margin-bottom: 20px;
  transition: all 0.3s;
  background: #fff;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
  
  .status-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    
    &.status-active {
      background: rgba(103, 194, 58, 0.1);
      color: #67C23A;
    }
    
    &.status-ended {
      background: rgba(144, 147, 153, 0.1);
      color: #909399;
    }
  }
}

.term-header {
  margin-bottom: 20px;
  
  .term-title {
    margin-bottom: 16px;
    
    .year {
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
    }
    
    .term-type {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 12px;
      
      &.term-spring {
        background: rgba(103, 194, 58, 0.1);
        color: #67C23A;
      }
      
      &.term-summer {
        background: rgba(230, 162, 60, 0.1);
        color: #E6A23C;
      }
      
      &.term-autumn {
        background: rgba(64, 158, 255, 0.1);
        color: #409EFF;
      }
      
      &.term-winter {
        background: rgba(144, 147, 153, 0.1);
        color: #909399;
      }
    }
    
    .name {
      margin: 10px 0 0 0;
      font-size: 20px;
      color: #303133;
    }
  }
  
  .term-info {
    .info-item {
      margin-bottom: 8px;
      color: #606266;
      
      i {
        margin-right: 8px;
        color: #409EFF;
      }
      
      .label {
        margin-right: 8px;
        color: #909399;
      }
    }
  }
}

.term-description {
  .description-content {
    color: #606266;
    line-height: 1.6;
  }
}

.term-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
  text-align: right;
}

.drawer-container {
  padding: 20px;
  
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEEF5;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
  }
}

.plan-card {
  .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    h4 {
      margin: 0;
      font-size: 16px;
      color: #303133;
    }
  }
  
  .plan-content {
    .plan-description {
      margin: 10px 0;
      color: #606266;
      line-height: 1.6;
    }
    
    .plan-info {
      color: #909399;
      font-size: 13px;
      
      span {
        margin-right: 20px;
        
        i {
          margin-right: 4px;
        }
      }
    }
  }
  
  .plan-actions {
    margin-top: 12px;
    text-align: right;
  }
}

.el-timeline-item {
  padding-bottom: 30px;
}
</style>
